<template>
	<div class="group-posts-list">
		<div class="group-posts-content">
			<div class="posts-list-title clear">
				<div class="post-logo"></div>
				<span class="fr">
					<el-checkbox v-model="check_my_posts" @change="getPostsList"></el-checkbox>
					<i>我的贴子</i>
				</span>
			</div>
			<div class="posts-list-handle clear">
				<div class="posts-handle-l">
					<el-button type="text" :class="[orderType=='create_time'? 'posts-btn-b':'']" @click="toggle_order('create_time')">时间</el-button>
					<i>|</i>
					<el-button type="text" :class="[orderType=='chats'? 'posts-btn-b':'']" @click="toggle_order('chats')">热度</el-button>
				</div>
				<el-button class="write-posts-btn fr" type="text" plain round @click="writePost"><i class="pen-icon"></i><i class="tip-word">写帖子</i></el-button>
			</div>
			<ul class="posts-ul">
				<li class="posts-li clear" v-for="(item,index) of postListsData" :key="index">
					<div class="posts-li-l">
						<router-link :to="{path: '/group/postDetails', query: {id:item.id}}">
							<span class="posts-li-title" :title="item.title">{{item.title}}</span>
						</router-link>
						<div class="posts-li-tips">
							<span>
								<i>{{item.create_name}}</i>
							</span>
							<span>
								<i class="ipm p-info-img"></i>
								<i>{{item.chats}}</i>
							</span>
							<span>
								<i class="ipm p-pride-img"></i>
								<i>{{item.fav_num}}</i>
							</span>
							<span>
								<i>{{item.create_time}}</i>
							</span>
							<span class="p-l-btns">
								<router-link v-if="item.create_id==user_login_id" :to="{path: '/group/postEdit', query: {id: group_id,p_id:item.id}}">
									<i class="ipm p-edit-img"></i>
								</router-link>
								<i class="ipm p-del-img" v-if="item.create_id==user_login_id||delFlag" @click="delete_your_post(item.id,item.title,item.content,item.resource_id)"></i>
							</span>
						</div>
					</div>

				</li>
				<div class="dependent" v-if="postListsData.length==0">
					<i class="ipng image_state01"></i>
					<p>还没发现任何相关的帖子哦~</p>
				</div>
			</ul>
		</div>
		<el-pagination v-if="total_number > page_size" @current-change="change_page" :page-size="page_size" :current-page="page_index"
		 layout="total,prev, pager, next,jumper" :total="total_number">
		</el-pagination>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				roleData: this.$store.getters.userInfo.rolebaseid,
				user_login_id: this.$store.getters.userInfo.id,
				create_id: this.$route.query.create_id,
				group_id: this.$route.query.id,
				check_my_posts: false,
				errorImg: 'this.src="' +
					require("../../../../public/images/group_introduct_img.png") +
					'"',
				orderType: "create_time",
				page_index: 1,
				page_size: 10,
				total_number: 0,
				postListsData: []
			};
		},
		created() {
			this.getPostsList();
		},
		computed: {
			// 判断用户是不是圈组创建者或管理员
			delFlag() {
				let roleData = deep_clone(this.roleData);
				let arr = roleData.filter(x => [1, 2, 3].includes(x));
				let flag = this.create_id == this.user_login_id;
				return arr.length > 0 || flag;
			}
		},
		methods: {
			// 圈组的成员或者是自己创建的圈组才有资格发帖子，此处验证才跳转
			writePost() {
				//如果帖子不是自己创建的，
				if (this.user_login_id != this.create_id) {
					// 判断有没有加入圈组了
					this.checkAdviced();
				} else {
					// 是自己创建的圈组，就直接跳转即可
					this.$router.push({
						path: '/group/postEdit',
						query: {
							id: this.group_id
						}
					});
				}
			},
			// 判断是否是圈组的成员
			checkAdviced() {
				let success = res => {
					if (res.data.length != 0 && res.data[0].status == 1 || this.user_login_id == this.create_id) {
						this.$router.push({
							path: '/group/postEdit',
							query: {
								id: this.group_id
							}
						});
					} else {
						//如果这个接口返回的数据是空的，\里面的数据的status不等于1，那就是没资格发帖
						this.$message.warning("您还不是此圈组的成员，请先加入圈组再发帖子");
					}
				};
				this.$ajax({
					url: "api/group/group_user",
					method: "get",
					params: {
						group_id: this.group_id,
						user_id: this.user_login_id,
					},
					func: {
						success: success
					}
				});
			},
			toggle_order(type) {
				this.orderType = type;
				this.getPostsList();
			},
			getPostsList() {
				let _params = {
					pid: 0,
					group_id: this.group_id,
					page_index: this.page_index,
					page_size: this.page_size,
					order: this.orderType, //create_time,chats
					drection: "DESC", //正序DESC，反序不填
					is_tree: 0, //是否获取下级（1是，0不是,不发不是）
					create_id: this.check_my_posts == true ? this.user_login_id : null
				};
				let success = res => {
					this.postListsData = res.data.data;
					this.page_index = parseInt(res.data.page_index);
					this.total_number = parseInt(res.data.data_sum);
				};
				this.$ajax.get("api/group/subject_group_chat", {
					params: _params,
					func: {
						success: success
					}
				});
			},
			delete_your_post(_id, _title, _content, _resource_id) {
				this.$confirm("确定删除吗?", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning",
						customClass: "confirm-them"
					})
					.then(() => {
						let del_params = {
							id: _id,
							title: _title,
							content: _content,
							resource_id: _resource_id,
							status: 0
						};
						this.sure_del_post(del_params);
					})
					.catch(() => {});
			},
			sure_del_post(_params) {
				let success = res => {
					this.$message.success(res.msg);
					this.getPostsList();
				};
				this.$ajax({
					url: "api/group/subject_group_chat",
					method: "put",
					data: _params,
					func: {
						success: success
					}
				});
			},
			// delHtmlTag(str){
			//     return str.replace(/<[^>]+>/g,"");
			//     console.log(str)
			// },
			change_page(val) {
				this.page_index = val;
				this.getPostsList();
			}
		}
	};
</script>

<style>
</style>
